<template>
  <div class="page-content">
    <KiTable 
      v-bind="tableConfig" 
      :tableData="tableData"
      :totalCount="totalCount"
      v-model:page="pageInfo" >
      <template #btn>
        <el-button 
          type="primary" 
          size="large"
          @click="handleCreateClick"
          v-if="tableName !== 'athletes' && tableName !== 'roles' && tableName !== 'scores' && tableName !== 'complains' && tableName !== 'register' && loginStore.userInfo.roleId === 6">新增</el-button>
      </template>
      <template #status="scope">
        <el-tag :type=" scope.item.enable ? 
                        scope.item.enable === 1 ? '':'danger': 
                        scope.item.status === 1 ? '':'danger'">
          {{scope.item.enable ? 
                        scope.item.enable === 1 ? '启用':'禁用': 
                        scope.item.status === 1 ? '启用':'禁用'}}
        </el-tag>
      </template>
      <template #imgUrl="scope">
        <el-image
          :src="scope.item.imgUrl"
          fit="cover"
          preview-teleported
          hide-on-click-modal
          :preview-src-list="[scope.item.imgUrl]"
        >
    </el-image>
      </template>
      <template #createAt="scope">
        {{timeFormat(scope.item.createAt)}}
      </template>
      <template #updateAt="scope">
        {{timeFormat(scope.item.updateAt)}} 
      </template>
      <template #time="scope">
        {{timeFormat(scope.item.time)}} 
      </template>
      <template #sex="scope">
        {{scope.item.sex === 1 ? '男':'女'}}
      </template>
      <template #state="scope">
        <el-tag :type="scope.item.state === 0 ? 'danger':'' ">
          {{scope.item.state === 0 ? '未处理':"已处理"}}
        </el-tag>
      </template>
      <template #score="scope">
        <template v-if="scope.item.score">
          {{scope.item.score}}
        </template>
        <template v-else>
          <el-tag type="danger">暂未公布</el-tag>
        </template>
      </template>
      <template #rank="scope">
         <template v-if="scope.item.rank">
          {{scope.item.rank}}
        </template>
        <template v-else>
          <el-tag type="danger">暂未公布</el-tag>
        </template>
      </template>
      <template #check="scope">
        <el-tag :type="scope.item.status === 0 ? 'danger':''">
          {{scope.item.status === 0 ?'未检录':"已检录"}}
        </el-tag>
      </template>
      <template #operation="scope">
        <el-button @click="handleEditClick(scope.item)" v-if="tableName !== 'register' && tableName !== 'checks' && loginStore.userInfo.roleId === 6">
          {{tableName === 'complains' ? '处理' : '编辑'}}
        </el-button>
        <el-popconfirm
          title="您确认要删除吗？"
          @confirm="handleDeleteClick(scope.item)"
          v-if="loginStore.userInfo.roleId === 6  && tableName !== 'checks'"
        >
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
        <el-button 
          type="primary"
          v-if="tableName === 'sports' && loginStore.userInfo.roleId === 1 && !isRegisterd(scope.item.id)"
          style="width:88px"
          @click="handleRegisterClick(scope.item)">报名</el-button>
        <el-button 
          type="danger"
          v-if="tableName === 'sports' && loginStore.userInfo.roleId === 1 && isRegisterd(scope.item.id)"
          @click="handleCancelClick(scope.item)"
          >取消报名</el-button>
        <el-button
          v-if="tableName === 'scores' && loginStore.userInfo.roleId === 1"
          @click="handleComplainClick(scope.item)">
          申诉
        </el-button>
        <el-button
          v-if="tableName==='checks'"
          type="primary"
          @click="handleCheckClick(scope.item)"
        >检录</el-button>
      </template>
    </KiTable>

  </div>
</template>

<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue';
import KiTable from '../ki-table/KiTable.vue';
import { useLoginStore, useTableStore,useRegisterStore } from '@/store';
import {timeFormat} from '@/utils/format'
import {ListName} from '@/store/table/type'
import {ITable} from '@/components/ki-table/type'
import { ElMessage } from 'element-plus';
import 'element-plus/theme-chalk/el-message.css'

interface IProps {
  tableConfig:ITable
  tableName:string
}

const props = withDefaults(defineProps<IProps>(),{})
const loginStore = useLoginStore()
const tableStore = useTableStore()
const registerStore = useRegisterStore()
const pageInfo = ref({
  pagenum: '1',
  pagesize: '10'
})
const getTableData = (queryInfo:any = {}) => {  
  tableStore.getTableAction(props.tableName,{
    ...pageInfo.value,
    ...queryInfo
  })
  registerStore.getRegisteredItemsByAthleteIdAction(loginStore.athleteInfo.athleteId)
}
watchEffect(() => {
  getTableData()
})
const tableData = computed(() => {
  return tableStore.dataList(props.tableName as ListName)
})
const totalCount = computed(() => {
  return tableStore.dataCount(props.tableName as ListName)
})
const registeredItems = computed(() => {
  return registerStore.registeredItems.length !== 0 ? registerStore.registeredItems:[]
})
const isRegisterd = (sportId:number) => {
  return registeredItems.value?.findIndex((item:any) => item.sportId ===  sportId) !== -1
}
interface IEmits {
  (e:'createClick'):void
  (e:'editeClick',info:any):void
  (e:'complainClick',info:any):void
}
const emits = defineEmits<IEmits>()
const handleCreateClick = () => {
  emits('createClick')
}
const handleEditClick = (info:any) => {  
  emits('editeClick',info)
}
const handleDeleteClick = (info:any) => {
  tableStore.removeTableAction(props.tableName,info.id)
}
const handleComplainClick = (info:any) => {
  emits('complainClick',info)
}
const handleRegisterClick = (info:any) => {
  const sportId = info.id
  const athleteId = loginStore.athleteInfo.athleteId
  registerStore.registerItemAction(sportId,athleteId)
  ElMessage.success('报名成功')
}
const handleCancelClick = (info:any) => {
  registerStore.removeRegisterAction(info.id,loginStore.athleteInfo.athleteId)
  ElMessage.success('取消成功')
} 
const handleCheckClick = (info:any) => {
  tableStore.editeTableAction('checks',info.id,{})
}
defineExpose({
  getTableData
})
</script>

<style scoped>
.page-content{
  background-color: #fff;
  border-radius: 10px;
  margin-top:20px;
}
</style>